<template>
  <div class="index" >
    <div class="container">
      <div class="main">
        <img class="magnetic" src="../common/images/index_music_button.png" alt="" v-if="magneticType === 1">
        <img class="magnetic" src="../common/images/index_music_stop_button.png" alt="" v-if="magneticType === 2">
        <!--<img class="masked" src="../common/images/index_masked.png" alt="">-->
        <ul class="tapes">
          <li class="tapeItem" v-for="(item, index) in tapes" @click="selectTpage(index)">
            <img class="music-start" src="../common/images/music_stop_button.png" alt=""
                 v-if="item.play === 1 && playTapeIndex === index"
                 @click.stop="musicPlay(index, 2)">
            <img class="music-stop" src="../common/images/music_start_button.png" alt=""
                 v-if="item.play === 2 || playTapeIndex !== index"
                 @click.stop="musicPlay(index, 1)">
            <img class="music-select-icon" src="../common/images/music_select_icon.png" alt="" v-if="selectTapeIndex === index">
          </li>
        </ul>
        <img class="select-button" src="../common/images/music_select_button.png" alt="" @click="goPoster()">
      </div>
      <div class="musics">
        <audio class="music-item">
          <source src="../common/music/1.mp3" type="audio/mp3" />
        </audio>
        <audio class="music-item">
          <source src="../common/music/2.mp3" type="audio/mp3" />
        </audio>
        <audio class="music-item">
          <source src="../common/music/1.mp3" type="audio/mp3" />
        </audio>
        <audio class="music-item">
          <source src="../common/music/2.mp3" type="audio/mp3" />
        </audio>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    // mixins 混合
    mixins: [],
    data() {
      return {
        magneticType: 0,
        tapes: [
          {
            play: 1,
            musicEl: false
          },
          {
            play: 1,
            musicEl: false
          },
          {
            play: 1,
            musicEl: false
          },
          {
            play: 1,
            musicEl: false
          }
        ],
        playTapeIndex: false,
        selectTapeIndex: false
      }
    },
    mounted() {
      for (let i in this.tapes) {
        this.tapes[i].musicEl = $('.music-item')[i]
      }
    },
    methods: {
      // 播放音乐
      musicPlay(index, type) {
        this.tapes[index].play = type
        if (type === 1) {
          this.playTapeIndex = index
          // 关闭其他的
          for (let i in this.tapes) {
            if (i == index) {
              this.tapes[i].musicEl.play()
            } else {
              this.tapes[i].musicEl.pause()
            }
          }
        } else {
          this.tapes[index].musicEl.pause()
        }
      },
      // 选择音乐
      selectTpage(index) {
        this.selectTapeIndex = index
      },
      // 跳到上传照片页
      goPoster() {
        if (this.selectTapeIndex !== false) {
          this.$router.push({path: 'poster', query: {tapeIndex: this.selectTapeIndex}})
        } else {
          alert('请先选择曲子')
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../common/stylus/base.styl'
  .main
    width 100%
    height vw(1250)
    background url("../common/images/music.jpg")
    background-size 100% 100%
    .magnetic
      width vw(63)
      position absolute
      right vw(28)
      top vw(41)
    .tapes
      width vw(536)
      height vw(382)
      position absolute
      left vw(134)
      top vw(610)
      display flex
      flex-wrap wrap
      justify-content space-between
      li
        width vw(217)
        height vw(139)
        position relative
        .music-start, .music-stop
          width vw(32)
          position absolute
          right 0px
          top 0px
        .music-select-icon
          width vw(60)
          position absolute
          right 0px
          bottom 0px
    .select-button
      width vw(455)
      position absolute
      left vw(134)
      top vw(1062)
</style>
